<template>
  <div>
    <Tips />

    <van-checkbox-group v-model="result" :disabled="isEditing">
      <van-checkbox
        :name="item.id"
        v-for="item in cartList"
        :key="item.id"
        @click="changeChecked(item)"
      >
        <van-swipe-cell>
          <van-card
            :num="item.number"
            :price="item.retail_price.toFixed(2)"
            :title="item.goods_name"
            :thumb="item.list_pic_url"
          />
          <template #right>
            <van-button
              square
              type="danger"
              text="删除"
              @click="deleteGoods(item.product_id)"
            />
          </template>

          <van-stepper
            v-model="item.number"
            v-show="isEditing"
            @change="stepperChange(item)"
          />
        </van-swipe-cell>
      </van-checkbox>
    </van-checkbox-group>

    <van-submit-bar
      :price="cartTotal.checkedGoodsAmount * 100"
      button-text="提交订单"
      @submit="onSubmit"
    >
      <van-checkbox v-model="checkedAll" :disabled="isEditing"
        >全选</van-checkbox
      >
      <template #tip>
        累计共<span class="toa">{{ cartTotal.checkedGoodsCount }}</span>
        件商品，可点击
        <van-button
          :type="isEditing ? 'danger' : 'primary'"
          size="mini"
          class="editor"
          @click="editButton"
          >{{ isEditing ? "完成编辑" : "编辑" }}</van-button
        >
        按钮进行商品数量修改
      </template>
    </van-submit-bar>
  </div>
</template>

<script>
import Tips from "@/components/Tips";
import {
  GetCartListData,
  ChangeGoodChecked,
  Septter,
  DeleteGood
} from "@/request/api";
export default {
  data() {
    return {
      // 全选控制
      //   checkedAll: false,
      result: [],
      //购物车列表数据
      cartList: [],
      //   商品总信息
      cartTotal: {},
      //编辑状态的设置
      isEditing: false
    };
  },
  computed: {
    checkedAll: {
      get() {
        return this.result.length == this.cartList.length ? true : false;
      },
      set(val) {
        //即将要修改成的新的值
        console.log("set", val);

        let ids = [];
        this.cartList.map(item => {
          ids.push(item.product_id);
        });
        ChangeGoodChecked({
          isChecked: val ? 1 : 0,
          productIds: ids.join()
        }).then(res => {
          if (res.errno == 0) {
            console.log("///", res);
            this.totalFn(res);
          }
        });
      }
    }
  },
  created() {
    GetCartListData().then(res => {
      if (res.errno == 0) {
        console.log("***", res);
        this.totalFn(res);
      }
    });
  },
  components: {
    Tips
  },
  methods: {
    deleteGoods(val) {
      DeleteGood({
        productIds: val.toString()
      }).then(res => {
        if (res.errno == 0) {
          this.totalFn(res);
        }
      });
    },
    totalFn(res) {
      this.cartList = res.data.cartList;
      this.cartTotal = res.data.cartTotal;
      //清空this.result数组，后面的操作不会使这个数组越来越长
      this.result = [];
      this.cartList.map(item => {
        item.checked == 1 ? this.result.push(item.id) : "";
      });
    },
    onSubmit() {},
    onClickEditAddress() {},
    //总结：为什么要发送这个请求？这个请求作用？
    //这个请求告诉了后端我们改变了哪些值，后端接收到之后，返回给我们一个处理过后的完整的页面数据
    // （包括总价的结算）
    //我们只需要拿到这个数据，网页面上填写就可以
    changeChecked(item) {
      if (this.isEditing) {
        return;
      }

      ChangeGoodChecked({
        isChecked: item.checked == 0 ? 1 : 0,
        productIds: item.product_id
      }).then(res => {
        if (res.errno == 0) {
          console.log("///", res);
          this.totalFn(res);
        }
      });
    },
    editButton() {
      this.isEditing = !this.isEditing;
    },
    stepperChange(item) {
      Septter({
        goodsId: item.goods_id,
        id: item.id,
        number: item.number,
        productId: item.product_id
      }).then(res => {
        if (res.errno == 0) {
          this.totalFn(res);
        }
      });
    }
  }
};
</script>
 
<style lang = "less" scoped>
/deep/.van-checkbox__label {
  flex: 1;
}
.van-checkbox-group {
  background-color: #fff;
  padding-bottom: 2.5rem;
  .van-checkbox {
    padding: 0.1rem 0.15rem;
    border-bottom: 1px solid #ccc;
  }
}
.van-submit-bar {
  bottom: 0.5rem;
  border-bottom: 1px solid #ccc;
}
/deep/.van-submit-bar__tip {
  display: flex;
  align-items: center;
}
.editor {
  margin: 0 0.05rem;
}
.toa {
  font-size: 0.16rem;
}
.van-stepper {
  text-align: right;
}
.van-button--square {
  height: 100%;
}
</style>